<template>
  <div>
    <!--使用组件-->
    <home-header :list="hedaderlist"></home-header>
    <home-swiper :listswiper="swiperlist"></home-swiper>
    <home-way :listway="waylist"></home-way>
    <home-pictures></home-pictures>
    <home-commendation :listrecom="listrecom"></home-commendation>
  </div>
</template>

<script>
import HomeHeader from './components/Header.vue' //   ./表示同级 引入头部组件局部组件
import HomeSwiper from './components/Carousel.vue'
import HomeWay from './components/Playway.vue'
import HomePictures from './components/Spotspictures.vue'
import HomeCommendation from './components/Popularrecommendation.vue'
import axios from 'axios'
export default {
  name: 'home',
  components: {
    HomeHeader,
    HomeSwiper,
    HomeWay,
    HomePictures,
    HomeCommendation
  },
  data () {
    return {
      hedaderlist: [],
      swiperlist: [],
      waylist: [],
      listrecom: []
    }
  },
  mounted () {
    axios.get('/localdata/index.json')
      .then((res) => {
        // handle success
        console.log(res)
        let datajson = res.data // 保存json数据
        let datalist = datajson.data // 保存所有的列表数据
        if (datajson.ret && datalist) { // datalist !=""可以简写为datalist
          this.hedaderlist = datalist.headerlist
          this.swiperlist = datalist.swiperlist
          this.waylist = datalist.waylist
          this.listrecom = datalist.recommendList
        }
      })
      .catch((error) => {
        // handle error
        console.log(error)
      })
  }
}
</script>
